<template>
  <!-- 作业票审查 待办 -->
  <view v-if="isEmpty">
    <empty></empty>
  </view>
  <view v-else>
    <view class="cu-card-wrap" v-for="(item, index) in listData" :key="item.nodeTaskId">
      <view class="header-wrap">
        <view class="title-wrap">
          <text class="title">{{ item.ticketCode }}</text>
        </view>
      </view>
      <view class="affix">
        <image
          class="affix-icon"
          :src="`/static/images/ticket-type/work-type-${item.workTypeFlag}.png`"
          mode="aspectFit"
        />
      </view>
      <view class="body-wrap">
        <view class="content-wrap">
          <view class="label">作业项目：</view>
          <view class="value">{{ item.projectName }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">项目编号：</view>
          <view class="value">{{ item.projectCode }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">当前节点：</view>
          <view class="value">{{ item.nodeTypeLabel }}</view>
        </view>
        <view class="content-wrap">
          <view class="label">当前状态：</view>
          <view class="value" :class="{ 'color-A14430': item.pause !== '2' }">{{ item.pauseLabel }}</view>
        </view>

        <view class="content-wrap">
          <view class="label">作业票证：</view>
          <navigator :url="`/pages/jobSlip/detail/index?ticketId=${item.ticketId}`" class="value color-88B4C4">
            查看详情
            <image class="icon-more" src="/static/images/more.png"></image>
          </navigator>
        </view>
      </view>
      <view class="footer-wrap">
        <view class="content-wrap">
          <!-- <view class="label">剩余时限：</view>
					<view class="value">3min</view> -->
        </view>
        <view class="button-wrap">
          <!-- 分析节点，动火，受限，用电 -->
          <view
            v-if="
              item.nodeTypeFlag === nodeTypeFlagEnum.ANALYSE &&
              (item.workTypeFlag === specialWorkTypeEnum.FIRE ||
                item.workTypeFlag === specialWorkTypeEnum.LIMIT_SPACE ||
                item.workTypeFlag === specialWorkTypeEnum.ELECTRIC)
            "
            class="button button-default"
            @click="transferTicket(item)"
          >
            转办
          </view>
          <view
            v-if="item.assignee == staffId && item.pause === '2'"
            class="button"
            @click="goPage(item, 'check', nodeTypeBtn[item.nodeTypeFlag] || '审查')"
          >
            {{ nodeTypeBtn[item.nodeTypeFlag] || '审查' }}
          </view>
        </view>
      </view>
    </view>
    <user-selector ref="transferSelectorRef" @change="transferSelectorChange" post-name="分析工"></user-selector>
  </view>
</template>

<script>
import UserSelector from '@/components/user-selector/index.vue'
import { turnTicket } from '@/api/spw/project.js'
import checkMixin from '../checkMixin.js'
import Empty from '@/components/cu-empty/index.vue'
import { nodeTypeFlagEnum, specialWorkTypeEnum } from '@/utils/constant.js'
export default {
  mixins: [checkMixin],
  components: {
    Empty,
    UserSelector
  },
  data() {
    return {
      nodeTypeFlagEnum,
      specialWorkTypeEnum,
      listType: '1',
      nodeTypeBtn: {
        FX: '分析'
      },
      transferForm: {}
    }
  },
  methods: {
    transferTicket(item) {
      this.transferForm.taskId = item.nodeTaskId
      this.transferForm.nodeId = item.nodeId
      this.transferForm.procInstId = item.procInsId
      this.$refs.transferSelectorRef.open()
    },
    async transferSelectorChange(obj) {
      console.log(obj)
      this.transferForm.toAssignee = obj.value
      this.$modal.confirm(`确定将任务转给【${obj.name}】吗？`).then(() => {
        turnTicket(this.transferForm).then(() => {
          this.$modal.showToast('转办成功')
          this.reloadData()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.affix {
  //width: 90px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
}

uni-image.affix-icon {
  height: 30px !important;
  width: 78px !important;
}
.button-wrap {
  .status-button {
    border: 1rpx solid #88b4c4;
    color: #88b4c4;

    &.active {
      border: 1rpx solid #c87c32;
      color: #c87c32;
    }
  }
}

.cu-card-wrap {
  margin-bottom: 24rpx;
  position: relative;
}

.icon-more {
  width: 32rpx;
  height: 32rpx;
  vertical-align: sub;
}
</style>
